<template> 
  <div class="header-banner">
    <Draggable/>
    <HeaderFile  />
   <div  class="row-flex">
    <div :src="items.url" v-for="(items,index) in checkedList" :key="index"  class="w16h16 ">
        <img :src="items.url"   alt="" srcset="">
    </div>
    <div class="w6h5"> 
        <img :src="listImg7"  @click="handleRightDown"   alt="" srcset="">
        <div class="content-setting-item2" v-if="isRightDown" @mouseleave="handleRightDown">
        <div class="content-setting-item3" v-for="(item,index) in list" :key="index">
           <a-checkbox v-model:checked="item.checked"  @change="onCheckAllChange" :id="index" >
            <div class="content-setting-item4"> 
            <img :src="item.url" alt="" srcset="" class="content-setting-item20">
            <div class="content-setting-item21">自适应画布</div>
             </div>
           </a-checkbox>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script lang="ts" setup> 
import HeaderFile from "@/components/svg/HeaderFile.vue"
import { ref } from "vue";
import Draggable from "./Draggable.vue"
import listImg1 from "../../assets/header/f1.png"
import listImg2 from "../../assets/header/f2.png"
import listImg3 from "../../assets/header/f3.png"
import listImg4 from "../../assets/header/f4.png"
import listImg5 from "../../assets/header/f5.png"
import listImg6 from "../../assets/header/f6.png"
import listImg7 from "../../assets/header/f7.png"
 
 const listImg =  ref([
   listImg1,
   listImg2,
   listImg3,
   listImg4,
   listImg5,
   listImg6 
 ])
const isRightDown =ref(false);

 const handleRightDown =() =>{
isRightDown.value =!isRightDown.value
 }
const list =ref([
  {
    id:1,
    url:listImg1,
    lable:"保存",
    checked:false
  },
  {
    id:2,
    url:listImg2,
    lable:"保存",
    checked:false
  },
  {
    id:3,
    url:listImg3,
    lable:"下载",
    checked:false
  },
  {
    id:4,
    url:listImg4,
    lable:"打印",
    checked:false
  },
  {
    id:5,
    url:listImg5,
    lable:"删除",
    checked:false
  }  
]);
const checkedList =ref([]);
const checked = ref(false);
const onCheckAllChange = (e: any) => {
  console.log(e.target )
  list.value[e.target.id].checked =e.target.checked; 
  checkedList.value=list.value.filter((items)=> items.checked ==true);
    console.log('0------->',checkedList.value);
};
 </script>

<style lang="scss" scoped>
 .header-banner {
   width: 100%;
   height: 30px; 
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-left: 9px;
 }
 .row-flex{
  display: flex;

    flex-direction: row;
    align-items: center;
    .w16h16{
      width: 16px;
    height: 16px;
    margin-right: 7px;
    cursor: pointer;
    }
    img{
      width: 100%;
      height: 100%;
    }
 }
 .w6h5{
  width: 6px;
  height: 5px;
  cursor: pointer;  
  margin-top: 3px;
  position:relative;
 img{
   width: 100%;
  height: 100%;
  display: block;
 }
 .content-setting-item20{
  width: 20px;
  height: 20px;
  margin-left:5px ;
}
 }

 
 
.content-setting-item21{
  margin-left:14px ;
 font-size: 12px;
   color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
} 
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #00aec6;
    border: 2px solid #00aec6;
  } 
.content-setting-item2{
  width: 153px;
  border: 1px solid rgba(237, 237, 237, 1);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  position: absolute;
  bottom: -210px;
  left: 0;
  z-index:22
}
.content-setting-item4{
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  top: 2px;
}
.content-setting-item3{
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 13px;
}
.content-setting-item3:hover{
  background: rgba(230, 248, 250, 1);
}
 
</style>
